<template>
<div>
    <el-col :span="6"><el-input placeholder="请输入内容" v-model="input1">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
    </el-col>
    <el-button type="primary">查询</el-button>

   <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="name" label="姓名"  width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center"></el-table-column>
        <el-table-column prop="address" label="住址" align="center"></el-table-column>
        <el-table-column prop="cureDate" label="治愈日期" align="center"></el-table-column>
        <el-table-column prop="cz" label="操作" align="center">
            <el-button  size="mini"  @click="getThing">详情</el-button>
        </el-table-column>
   </el-table>
     <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>
    
    <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
 
            <el-form ref="form"  :model="form" label-width="150px">
                <el-row>
                    <el-col :span="12">        
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.isGender">
                            <el-radio :label="0">女</el-radio>
                            <el-radio :label="1">男</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>   
                <el-row>
                    <el-col :span="12">  
                        <el-form-item label="身份证号">
                            <el-input v-model="form.idcard"></el-input>
                        </el-form-item>   
                     </el-col>
                    <el-col :span="12">  
                        <el-form-item label="年龄">
                             <el-input-number v-model="form.age" :min="1" :max="120" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>   
                 <el-row>
                    <el-col :span="12">   
                        <el-form-item label="电话号码">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>   
                    </el-col>
                    <el-col :span="12"> 
                        <el-form-item label="住院日期">
                             <el-date-picker
                            v-model="form.in_hospital_date"
                            type="date"
                            placeholder="住院时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                 </el-row>
                 <el-row>
                    <el-col :span="12">   
                        <el-form-item label="治疗医院">
                            <el-input v-model="form.hospital"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">   
                        <el-form-item label="感染来源">
                             <el-input v-model="form.resource"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">   
                        <el-form-item label="住址">
                            <el-input v-model="form.address"></el-input>
                        </el-form-item>  
                        </el-col>
                    <el-col :span="12">  
                        <el-form-item label="出院日期">
                             <el-date-picker
                            v-model="form.out_hosipital_date"
                            type="date"
                            placeholder="出院时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row> 
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.remark" rows="4" max="180"></el-input>
                        </el-form-item>


                    <!-- <el-form-item label="治愈时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.value"
                                type="date"
                                placeholder="请选择时间">
                                </el-date-picker>          
                    </el-form-item> -->
                    <!-- <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.desc" rows="4" max="200"></el-input>
                    </el-form-item> -->
                    </el-form>
                     <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">关闭</el-button>
                          
                    </div>
                 </el-dialog>

</div>
</template>
<script>
import request from '@/utils/request'
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      getThing(){
          //第一步显示对话框
           this.dialogFormVisible = true
           //通过axios发送ajax请求，将返回数据显示到对话框对象中
            request({
              url:'../cure_info.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
      }
    },
      data() {
    return {
        input1: '',
        tableData: null,
        dialogFormVisible: false,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4, 
        form:{
           age:'', 
          name: '',
          isGender: '',
          delivery: false,
          type: [],
          remark: '',
          out_hosipital_date:'',
          in_hospital_date:'',
          hospital:'',
          idcard:'',
          phone:'',
          address:'', 
          resource:'',
        },
          tableData:[{
          name:'lucy',
          age:'22',
          gender:'女',
          address:'北京大街100号',
          cureDate:'2022-05-08'
      },
      {
          name:'奇异博士',
          age:'20',
          gender:'男',
          address:'北京大街100',
          cureDate:'2022-05-08'
      }],
      formLabelWidth: '80px'
    }
  }
}
</script>